import {SplitLine} from '@/components/splitLine'
import {CnMediumSpan, CnNormalSpan} from '@/components/text'
import CircleNum from '@/components/others/circleNum'
import useBackLogs from '@/hooks/pm/backLogs'
import useMyPm from '@/hooks/pm/myPm'
import {PmBaseInfoCard} from './components'
import {to_phone_taskDone, to_phone_taskTodo} from '@/libs/pageRedirect'
import PhoneLayout from '@/layout/index_phone'
import {IconImg} from '@/components/image'
import {getSession} from '@/libs/sessionStorage'
import { defineComponent, onMounted } from 'vue'

export default defineComponent({
  name: 'phone-home',
  setup(props, ctx) {
    const {updateBackLogs, notHanderWorkList, updateHanderWorkList, handerWorkList} = useBackLogs()
    const {getMyPmListByUserDDId, myPmList} = useMyPm()
    onMounted(() => {
      updateBackLogs()
      updateHanderWorkList()
      let userDDId = getSession('userDDId')

      if (userDDId) {
        getMyPmListByUserDDId({userDDId, updateMyPmList: true})
      }
    })
    return () => (
      <PhoneLayout
        v-slots={{
          nav: () => (
            <div class='h-60 border-0 border-t-1 flex justify-between items-center gap-x-16'>
              <CnMediumSpan
                class='flex-1 text-center text-14 flex justify-center items-center gap-x-8'
                onClick={() => {
                  to_phone_taskTodo()
                }}
              >
                <IconImg imgName='notHander' class='inline-block w-22 h-22'></IconImg>
                待办任务
                <CircleNum num={notHanderWorkList.value.length}></CircleNum>
              </CnMediumSpan>
              <SplitLine
                class='py-18 w-2'
                style={{
                  background: '#eff0f4'
                }}
              ></SplitLine>
              <CnMediumSpan
                class='flex-1 text-center text-14 flex justify-center items-center gap-x-8'
                onClick={() => {
                  to_phone_taskDone()
                }}
              >
                <IconImg imgName='hander' class='inline-block w-22 h-22'></IconImg>
                已办任务
                <CircleNum num={handerWorkList.value.length}></CircleNum>
              </CnMediumSpan>
            </div>
          )
        }}
      >
        <div class='flex-1 pt-8 overflow-y-auto'>
          <div class='border-t-1 bg-white pt-8'>
            {myPmList.value.map(myPm => (
              <PmBaseInfoCard pm={myPm}></PmBaseInfoCard>
            ))}
          </div>
        </div>
      </PhoneLayout>
    )
  }
})
